<template>
	<view class="map-content">
		<map 
			id="tencentMap" 
			scale="13"
			style="width: 100%; height:100%;"
			:show-compass="showCompass" 
			:enable-traffic="enableTraffic" 
			:longitude="longitude"
			:latitude="latitude" 
			:markers="markers" 
			:show-location="showLocation" 
			@markertap="markertap"
		></map>
	</view>
</template>


<script>	
	export default {
		props: {	
			showCompass: { //	是否显示指南针
				type: Boolean,
				default: false
			},
			enableTraffic: { //	是否开启实时路况
				type: Boolean,
				default: false
			},
			showLocation: { //	是否显示带有方向的当前定位点
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				id:0,
				latitude:25.09672900,
				longitude:102.65401300,
				markers: [
					
				],
			}
		},
		onLoad(option) {
			this.id = parseInt(option.id);
			this.loadData(option);
			// //   wx请求获取位置权限
			// this.getAuthorize().then(() => {
			// 		//   同意后获取
			// 	this.getLocationInfo();
			// }).catch(() => {
			// 	// //   不同意给出弹框，再次确认
			// 	// this.openConfirm().then(() => {
			// 	// 	this.getLocationInfo();
			// 	// }).catch(() => {
			// 	// 	this.rejectGetLocation();
			// 	// });
			// 	this.getLocationInfo();
			// });
		},
		methods: {
			async loadData(option) {			
					//加载商品
					await uni.request({
						url: '/wanlshop/ddporder/getPartnerShop2',
						data: option,
						success: res => {
							this.markers = [
								{
									id:res.data.id,
									latitude:res.data.lat,
									longitude:res.data.lon,									
									store:res.data.store,
									width: 25,
									height: 30,
									iconPath: '/static/images/img/bj.png',
									callout:{
										content:res.data.store,
										color:'#000',
										fontSize:15,
										bgColor:'#fff',
										padding:5,
										display:'ALWAYS',
										textAlign:'center'
									}
								},
							];
							this.latitude = res.data.lat;
							this.longitude = res.data.lon;
						}
					});
				},
			
			//   初次位置授权
			getAuthorize() {
				console.log(11);
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: "gcj02",//GCJ-02
					isHighAccuracy:true,
					success: function(res) {
						console.log(res);
						that.longitude = res.longitude; 
						that.latitude = res.latitude;						
					},
				});
			},
			// 拒绝授权后，弹框提示是否手动打开位置授权
			openConfirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "请求授权当前位置",
						content: "我们需要获取地理位置信息，为您推荐附近的商家",
						success: (res) => {
							if (res.confirm) {
								// #ifdef MP-WEIXIN
								uni.openSetting().then((res) => {
									if (res[1].authSetting["scope.userLocation"] === true) {
										resolve(); // 打开地图权限设置
									} else {
										reject();
									}
								});							
								// #endif
								// #ifndef MP-WEIXIN 
								resolve();
								// #endif
							} else if (res.cancel) {
								reject();
							}
						},
					});
				});
			},
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "您拒绝了授权，无法获得周边信息",
					icon: "none",
					duration: 2000,
				});
			},
			//	地图标点 点击事件
			markertap(e){
				console.log(e);
				let plugin = requirePlugin('routePlan');
				let key = 'PNXBZ-ZM4EN-VREFO-SB5XY-E64D3-FOFRM';  //	使用在腾讯位置服务申请的key
				let referer = 'www.ddguan.cn';   						  //	调用插件的app的名称
				let navigation = 1  							  //	值为1时，开启驾车导航功能；默认不开启此功能
				let endPoint = JSON.stringify({  				  //	终点
				  'name': this.markers['0'].store,
				  'latitude': this.markers['0'].latitude,
				  'longitude': this.markers['0'].longitude
				});
				wx.navigateTo({
				  url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint + '&navigation=' + navigation
				});
				
			}
		}
	}

</script>

<style lang="scss">
	.map-content{
		height: 100vh;
		width: 100vh;
		overflow: hidden;	
	} 
	.map{
		width: 100%;
		height: 110%;
	}

</style>
